<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <base href="/oa1/" />
    <title>编辑产品 - 襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="static/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet">
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑产品信息</h4>
    </div>

    <div class="panel-body">
        <form action="kh/product/updateKhProduct" enctype="multipart/form-data" id="myform" method="post" class="form-horizontal">
            <!-- 错误提示 -->
            <c:if test="${not empty errorMsg}">
                <div class="alert alert-danger" role="alert">${errorMsg}</div>
            </c:if>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="linkname" class="col-md-4 control-label">产品名称<span style="color:red">*</span></label>
                    <div class="col-md-8">
                        <input type="hidden" id="oid" name="oid" value="${khProduct.oid}">
                        <input type="text" id="linkname" name="linkname" class="form-control" value="${khProduct.linkname}">
                    </div>
                </div>

                <div class="form-group col-md-6">
                    <label for="url" class="col-md-4 control-label">产品规格</label>
                    <div class="col-md-8">
                        <input type="text" id="url" name="url" class="form-control" value="${khProduct.url}">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="info" class="col-md-4 control-label">产品描述</label>
                    <div class="col-md-8">
                        <input type="text" id="info" name="info" class="form-control" value="${khProduct.info}">
                    </div>
                </div>

                <div class="form-group col-md-6">
                    <label for="packdesc" class="col-md-4 control-label">包装描述</label>
                    <div class="col-md-8">
                        <input type="text" id="packdesc" name="packdesc" class="form-control" value="${khProduct.packdesc}">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <label for="memo" class="col-md-2 control-label">产品备注</label>
                    <div class="col-md-8">
                        <textarea class="form-control" id="memo" name="memo" rows="5">${khProduct.memo}</textarea>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="imgfile" class="col-md-4 control-label">产品图片</label>
                    <div class="col-md-8">
                        <!-- 显示现有图片 -->
                        <div class="mb-2">
                            <c:if test="${not empty khProduct.picture}">
                                <img src="${pageContext.request.contextPath}/static/${khProduct.picture}" width="100px" height="100px" alt="${khProduct.linkname}">
                            </c:if>
                            <c:if test="${empty khProduct.picture}">
                                <img src="static/images/default-product.png" width="100px" height="80px" alt="默认图片">
                            </c:if>
                        </div>
                        <!-- 上传新图片 -->
                        <input type="file" id="imgfile" name="imgfile" accept="image/*">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <div class="col-md-10 col-md-offset-2">
                        <a href="javascript:history.back()" class="btn btn-info">返回</a>
                        <button type="submit" class="btn btn-success">提交修改</button>
                        <button type="reset" id="resetbtn" class="btn btn-default">重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // 表单验证
    $(document).ready(function() {
        $("#myform").bootstrapValidator({
            message: '输入值无效',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                linkname: {
                    validators: {
                        notEmpty: {message: '产品名称不能为空'},
                        stringLength: {min: 2, max: 20, message: '名称长度需在2-20位'},
                        remote: {
                            url: "kh/product/checkKhProductName",
                            delay: 1000,
                            type: 'post',
                            message: '该名称已存在',
                            data: function(validator) {
                                return {
                                    'name': $("#linkname").val(),
                                    'oid': $("#oid").val()
                                };
                            }
                        }
                    }
                },
                url: {
                    validators: {stringLength: {max: 20, message: '规格最多20位'}}
                },
                info: {
                    validators: {stringLength: {max: 100, message: '描述最多100位'}}
                },
                packdesc: {
                    validators: {stringLength: {max: 100, message: '包装描述最多100位'}}
                },
                memo: {
                    validators: {stringLength: {max: 500, message: '备注最多500位'}}
                }
            }
        });

        // 重置按钮清除验证状态
        $("#resetbtn").click(function() {
            $("#myform").data("bootstrapValidator").resetForm();
        });
    });

    // AJAX错误处理
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            console.log("服务器错误!");
        }
    });
</script>
</body>
</html>